<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
Copyright (c) 2008 Matthew Johnson
Licensed under the MIT License (see license.txt)	
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag and Drop</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
	
<!-- {NAV} -->
<ul class="nav">
	<li>Markup
		<ul>
			<li><a href="getting_started.html">Getting started</a></li>
			<li><a href="attributes.html">Elements and attributes</a></li>
			<li><a href="actions.html">Events and actions</a></li>
			<li><a href="tweens.html">Tweens</a></li>
			<!--<li><a href="more_tweens.html">More tweens</a></li>-->
			<li><a href="custom_actions.html">Custom actions</a></li>
		</ul>
	</li>
	<li>Widgets
		<ul>
			<li><a href="buttons.html">Buttons</a></li>
			<li><a href="more_buttons.html">More buttons (and tabs)</a></li>
			<li><a href="filmstrip.html">Filmstrip</a></li>
			<li><a href="popup.html">Popup</a></li>
			<li><a href="drag_and_drop.html">Drag and drop</a></li>
			<li><a href="slider.html">Slider</a></li>
			<li><a href="scrollable_text.html">Scrollable text</a></li>
			<li><a href="media_controller.html">Media controller</a></li>
			<li><a href="video.html">Video</a></li>
		</ul>
	</li>
	<li>Example Media
		<ul>
			<li><a href="theories_and_assumptions/theories_and_assumptions.html">Tabs with drag and drop</a></li>
			<li><a href="group_counseling/group_counseling.html">Multiple videos with drag and drop</a></li>
		</ul>
	</li>
	<li><a href="cheatsheet.pdf">Cheatsheet</a></li>
	<li><a href="release_notes.html">Release Notes</a></li>
</ul>
<!-- {/NAV} -->
	
<h1>Drag and Drop</h1>
	
<h2>Drag items and drop targets</h2> 
<p>
Drag and drop interactions are composed of drag items and drop targets.  Each drop target can include an "overIndicator" child that will be visible when an item is dragged over it as in this example:
<br /><img src="drag_and_drop/over_indicator.png" /><br />
</p>
<p>
To give the user feedback you can include a "dropIndicator" (either as a child instance of the drag item, the drop target, or both) that will be shown and hidden when the item is dropped on a valid drop area:
<br /><img src="drag_and_drop/drop_indicator.png" /><br />
</p>
<p>
To give the user feedback when they make an error you can include the an "invalidDropIndicator" (either as a child instance of the drag item, the drop target, or both) that will be shown and hidden when the item is dropped on a valid drop area:
<br /><img src="drag_and_drop/invalid_drop_indicator.png" /><br />
</p>
<p>
The "dropTargets" attribute allows you to specify for each drag item which drop targets the item is allowed to be dragged to.  All other drop targets are considered invalid.  By default the drag item is centered in the drop target when the item is dropped in a valid drop target.  If this position is not where you want the item there are 2 additional ways to position the drag items when they are dropped.  The first way is to use a drop marker inside the drop target.  This can simply be an instance called dropMarker or you can name it after the drag item (for example if your drag item is called dragItem3 you would call it dragItem3DropMarker).  Here is what a drop marker looks like:
<br /><img src="drag_and_drop/drop_marker.png" /><br />
Instead of using a drop marker you can also specify dropX and dropY attributes for the drop target in the ActionML xml file.  As with drop markers you can name these after a drag item (if the drag item is dragItem1 you would use the attributes dragItem1X and dragItem1Y).
</p>
<p>
Here is an example of drag and drop XML:
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=drag_and_drop/drag_and_drop.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=drag_and_drop/drag_and_drop.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=drag_and_drop/drag_and_drop.swf"></embed>
  </object>
  </noscript>
Download the fla for this example <a href="drag_and_drop/drag_and_drop.fla">here</a>.
</p>

</body>
</html>
